<template>
  <div class="home-container">

    <!-- 用户头像部分 -->
    <div class="header">
      <div class="userName">
        <p>{{hellotime}}</p>
        <span>逍遥</span>
      </div>
      <div class="userImg">
        <img src="@/assets/userImg.jpg" alt="用户头像">
      </div>
    </div>

    <!-- 搜索部分 -->
    <div class="search">
      <input type="text" autofocus placeholder="Search for you motions">
      <span><van-icon size="25px" name="search" /></span>
    </div>

    <!-- 今日任务组件 -->
    <TodayTask></TodayTask>

    <!-- 你的目标 -->
    <h2>你的目标</h2>
    <div>
      <YourMuBiao></YourMuBiao>
      <YourMuBiao></YourMuBiao>
      <YourMuBiao></YourMuBiao>
    </div>
  </div>
</template>

<script>
// 引入今日任务组件
import TodayTask from './TodayTask.vue'
// 引入你的目标组件
import YourMuBiao from './YourMuBiao.vue'
export default {
  components: {
    TodayTask,
    YourMuBiao
  },
  computed: {
    // 更改时间
    hellotime () {
      const data = new Date()
      const h = data.getHours()
      if (h >= 0 && h < 11) {
        return '早上好'
      } else if (h < 14) {
        return '中午好'
      } else if (h < 18) {
        return '下午好'
      } else {
        return '晚上好'
      }
    }
  }
}
</script>

<style lang='less' scoped>
  .home-container {
    position: relative;
    padding: 7.7778rem 1.3889rem 4.4444rem;
    .header {
      position: fixed;
      top: 0;
      width: 100%;
      height: 7.7778rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      z-index: 9999;
      padding-right:2.7778rem;
      padding-top: 2.2222rem;
      padding-bottom: 1.1111rem;
      // 用户名部分
      .userName {
        height: 4.4444rem;
        p{
          font-size: 1.1111rem;
          font-weight: 700;
          color: rgb(135, 132, 149);
          margin-bottom: .5556rem;
        }
        span {
          font-size: 1.3333rem;
          font-weight: 700;
        }
      }
      // 用户头像
      .userImg {
        width: 4.4444rem;
        height: 4.4444rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    // 搜索部分
    .search {
      width: 100%;
      input {
        width: 80%;
        height: 2.2222rem;
        border-radius: .5556rem;
        outline: none;
        border: 0;
        background-color: rgb(248, 248, 250);
        padding-left: .7778rem;
        vertical-align: middle;
        &::placeholder {
          font-size: .8889rem;
          color: rgb(207, 206, 214);
        }
      }
      span {
        display: inline-block;
        width: 11%;
        height: 2.2222rem;
        border: 1px solid #ccc;
        border-radius: .5556rem;
        margin-left: 1.1111rem;
        vertical-align: middle;
        text-align: center;
        line-height: 2.2222rem;
        padding-top: .1667rem;
      }
    }
  }
</style>
